<template>
  <div>
    <div class="line"> </div>
    <div class="creatVideo">
      <div class="label">
        <svg @click="backPage" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="tabler-icon tabler-icon-arrow-left">
          <path d="M5 12l14 0"></path>
          <path d="M5 12l6 6"></path>
          <path d="M5 12l6 -6"></path>
        </svg>
        <span>{{ $t('creatVideo.creatVideo1') }}</span>
        <!-- <el-tooltip class="item" effect="dark" content="How to Post Images and Videos" placement="top">
          <svg style="color: #c1c2c5;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="tabler-icon tabler-icon-help-circle">
            <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
            <path d="M12 16v.01"></path>
            <path d="M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483"></path>
          </svg>
        </el-tooltip> -->

      </div>
      <!-- <div class="desc">
        {{ $t('creatVideo.creatVideo2') }}<span>{{ $t('creatVideo.creatVideo3') }}</span> {{ $t('creatVideo.creatVideo4')
        }}<span>{{ $t('creatVideo.creatVideo5') }}</span>.
      </div> -->



      <div class="uploadImgBox" v-if="!videoSrc" v-loading="uploadLoading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
          class="tabler-icon tabler-icon-photo">
          <path d="M15 8h.01"></path>
          <path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z"></path>
          <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5"></path>
          <path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"></path>
        </svg>
        <div class="text">
          <div class="titles">{{ $t('creatVideo.creatVideo6') }}</div>
          <!-- <div>{{ $t('creatVideo.creatVideo7') }}</div> -->
          <div>{{ $t('creatVideo.creatVideo8') }}</div>
          <div>{{ $t('creatVideo.creatVideo9') }}</div>
          <!-- <div>{{ $t('creatVideo.creatVideo10') }}</div> -->
        </div>

        <el-upload  class="upload-demo"  :show-file-list="false"
		 drag :action="getAction()"
		 :headers="headers"
		 :limit="1"
		 :on-progress="handleProgress"
		 :before-upload="beforeUpload"
		 :on-success="handleSuccess"
		 :on-remove="handleRemove"
          multiple>
          <i class="el-icon-upload"></i>
        </el-upload>

      </div>

      <video v-if="videoSrc" class="uploadVideo" :muted="true" :autoplay="true" :src="videoSrc"></video>


      <!-- <div class="desc" style="color: #c7c7c7;">
        {{ $t('creatVideo.creatVideo11') }}<span>{{ $t('creatVideo.creatVideo12') }}</span> {{
          $t('creatVideo.creatVideo13') }}<span>{{ $t('creatVideo.creatVideo14') }}</span> {{ $t('creatVideo.creatVideo15')
  }}
      </div> -->

      <!-- <div class="shengcheng">
        <div class="labels">
          {{ $t('creatVideo.creatVideo16') }} <span>*</span>
          <el-tooltip class="item" effect="dark"
            content="Models are the resources you're generating with. Using a different base model can drastically alter the style and composition of images, while adding additional resource can change the characters, concepts and objects"
            placement="top">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="tabler-icon tabler-icon-info-circle">
              <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
              <path d="M12 9h.01"></path>
              <path d="M11 12h1v4h1"></path>
            </svg>

          </el-tooltip>
        </div>
        <div class="boxs">
          <div class="title">
            
          </div>
          <div class="num">8</div>
          <div class="btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="tabler-icon tabler-icon-replace">
              <path d="M3 3m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
              <path d="M15 15m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
              <path d="M21 11v-3a2 2 0 0 0 -2 -2h-6l3 3m0 -6l-3 3"></path>
              <path d="M3 13v3a2 2 0 0 0 2 2h6l-3 -3m0 6l3 -3"></path>
            </svg>
            <span>{{ $t('creatVideo.creatVideo17') }}</span>
          </div>
        </div>
      </div> -->

      <div class="shengcheng">
        <div class="boxs" style="cursor: pointer;">
          <div style="position: relative;padding: 4px 0;">
            <div class="title">
              {{ $t('creatVideo.creatVideo20') }} <span style="color: red;">*</span>
              <el-tooltip class="item" popper-class="popper-class" effect="dark"
                content="Type out what you'd like to generate in the positive field, add aspects you'd like to avoid in the negative prompt"
                placement="top">
                <!-- <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="tabler-icon tabler-icon-info-circle">
                  <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
                  <path d="M12 9h.01"></path>
                  <path d="M11 12h1v4h1"></path>
                </svg> -->

              </el-tooltip>
            </div>
            <div class="input">
              <textarea type="text" v-model="title" />
            </div>
          </div>
        </div>
      </div>

      <div class="shengcheng">
        <div class="boxs" style="cursor: pointer;">
          <div @click="showMore = !showMore" style="position: relative;padding: 4px 0;">
            <div class="title">
              {{ $t('creatVideo.creatVideo18') }} <span style="color: red;">*</span>
            </div>
            <div class=" icons">
              <svg :class="showMore ? 'xuanzhuanIcon' : ''" viewBox="0 0 15 15" fill="none"
                xmlns="http://www.w3.org/2000/svg" width="16" height="16">
                <path
                  d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
                  fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>
              </svg>
            </div>
          </div>

          <div class="moreAdd" v-if="showMore">
            <div class="taglist">
              <span @click="tabIndex = index" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tablist"
                :key="index">{{ item.cateName }}</span>
            </div>
            <!-- <span>{{ $t('creatVideo.creatVideo19') }}</span> -->
          </div>
        </div>
      </div>

      <div class="submitBtn" @click="submit">
        Create
      </div>


      <!-- <div class="shengcheng">
        <div class="boxs" style="cursor: pointer;">
          <div style="position: relative;padding: 4px 0;">
            <div class="title">
              {{ $t('creatVideo.creatVideo21') }}
            </div>
            <div class="input">
              <textarea type="text" v-model="form.name2" />
            </div>
          </div>
        </div>
      </div> -->
    </div>
    <div style="height: 120px;"></div>
  </div>
</template>

<script>
import ElementUI from "element-ui";
export default {
  name: "creatVideo",
  data() {
    return {
      uploadLoading:false,
      tablist: [],
      tabIndex: -1,
      showMore: true,
	  headers: {
	    Authorization: 'Bearer '+localStorage.getItem('token')
	  },
	  title:'',
      form: {
        name1: '',
        name2: '',
      },
      videoSrc: ''
    };
  },
  mounted() {
    this.getCates();
  },
  methods: {
	
	  submit() {
		  if (!this.videoSrc) {
		      ElementUI.Message({ message: 'Must upload video!', type: 'error', duration: 2000 })
		      return;
		  }
		  if (!this.title) {
		      ElementUI.Message({ message: 'Must title!', type: 'error', duration: 2000 })
		      return;
		  }
		  if (this.tabIndex == -1) {
		      ElementUI.Message({ message: 'Must Category!', type: 'error', duration: 2000 })
		      return;
		  }
	    this.$api.topicFabu({title:this.title,videoUrl:this.videoSrc,categoryId:this.tablist[this.tabIndex].id}).then(res => {
		  ElementUI.Message({ message: 'Submit Success~', type: 'success', duration: 2000 })
	      this.$router.push({ path: '/My'})
	    })
	  },
	 //  getToken(){
		// return 'Bearer '+localStorage.getItem('token'); 
	 //  },
	 getAction(){
		return process.env.VUE_APP_BASE_RUL + '/api/upload'; 
	 },
	  handleProgress(event, file, fileList) {
	      console.log(event)
	  },
	  handleSuccess(response, file, fileList) {
	    console.log(fileList,'fileList');
	    const that = this
      this.uploadLoading = false
	    this.uploadProgress = 0
	    this.videoSrc = response.link
	    //this.formValidate.pdfName = file.name
	  },
	  handleRemove(response, file, fileList) {
	    this.formValidate.pdfUrl = '';
	    this.formValidate.pdfName = '';
	  },
	  beforeUpload(file) {
	    // if (this.formValidate.pdfUrl) {
	    //   this.$message.warning('文件数量不能超过1!')
	    //   return false
	    // }
	    console.log(file,'file');
	    let isPic = file.type === 'video/mp4'
	    let isLt2M = file.size / 1024 / 1024 < 20
	    if (!isPic) {
	      this.$message.warning('MUST MP4!')
	      return false
	    }
	    if (!isLt2M) {
	      this.$message.warning('File Size 20MB!')
	    }
      this.uploadLoading = true
	    return isPic && isLt2M
	  },
	  
    getCates() {
      this.$api.bbsCategorys().then(res => {
        console.log(res, 'res');
        this.tablist = res;
      })
    },
    backPage() {
      this.$router.go(-1);
    },
    onsuccess(){
      this.videoSrc = 'https://vod.pipi.cn/fe5b84bcvodcq1251246104/658e4b085285890797861659749/f0.mp4'
    }
  },
};  
</script>

<style lang="scss" scoped>
.submitBtn{
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1971c2;
  margin-top: 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 15px;
}
.taglist {
  display: flex;
  align-items: center;
  position: relative;
  padding-right: 20px;
  flex-wrap: wrap;

  .active {
    background-color: rgb(25, 113, 194);
  }

  svg {
    position: absolute;
    right: 0;
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.40);
    height: 28px;
    min-height: 28px;
    width: 28px;
    min-width: 28px;
    cursor: pointer;
  }

  span {
    padding: 0px 8px;
    appearance: none;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    height: 26px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    -webkit-tap-highlight-color: transparent;
    display: inline-block;
    width: auto;
    border-radius: 4px;
    font-weight: 600;
    position: relative;
    line-height: 1;
    font-size: 14px;
    user-select: none;
    cursor: pointer;
    border: 1px solid transparent;
    background-color: rgb(52, 58, 64);
    color: rgb(254, 254, 254);
    text-transform: uppercase;
    margin-right: 8px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin-top: 10px;
  }

}

.line {
  width: 100%;
  height: 1px;
  background-color: #2c2e33;
}

.popper-class {
  width: 120px;
}

.creatVideo {
  width: 509px;
  margin: 0 auto;
  margin-top: 20px;

  .label {
    svg {
      cursor: pointer;
    }
  }

  .desc {
    margin-top: 16px;
    color: rgb(144, 146, 150);
    font-size: 11px;
    line-height: 1.55;
    text-decoration: none;
    cursor: pointer;

    span {
      color: rgb(77, 171, 247);
    }

    span:hover {
      text-decoration: underline;
    }
  }

  .uploadVideo {
    width: 100%;
    margin: 10px 0;
  }

  .uploadImgBox {
    width: 100%;
    height: 193px;
    margin-top: 15px;
    box-sizing: border-box;
    background-color: rgb(37, 38, 43);
    border: 2px dashed rgb(55, 58, 64);
    padding: 16px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: background-color 150ms ease 0s;
    position: relative;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #C1C2C5;
    position: relative;

    /deep/ .el-upload {
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      top: 0;
      z-index: 100;
      opacity: 0;
    }



    .text {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    div {
      color: rgb(144, 146, 150);
      line-height: 18px;
    }

    .titles {
      color: inherit;
      font-size: 20px;
      line-height: 1;
      text-decoration: none;
      margin-bottom: 12px;
      color: #C1C2C5;
      margin-top: 5px;
    }
  }

  .uploadImgBox:hover {
    background-color: rgb(44, 46, 51);
  }

  .label {
    display: flex;
    align-items: center;

    span {
      font-weight: 700;
      font-size: 32px;
      line-height: 1.3;
      margin: 0 10px;
      color: #c1c2c5;

    }
  }
}

.shengcheng {
  margin-top: 20px;

  .labels {
    color: #c1c2c5;
    font-size: 13px;

    span {
      color: red;
    }
  }

  .boxs {
    text-decoration: none;
    color: rgb(193, 194, 197);
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: none;
    border: 1px solid rgb(55, 58, 64);
    position: relative;
    overflow: hidden;
    background-color: rgb(37, 38, 43);
    padding: 8px 12px;
    margin-top: 15px;
    position: relative;

    .title {
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 6px;
    }

    .input {
      textarea {
        background: transparent;
        width: 100%;
        resize: none;
        border: none;
        padding: 10px 0px;
        outline: none;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
        font-size: 14px;
        line-height: 1.55;
        overflow: hidden;
        color: rgb(193, 194, 197);
        height: 128px;
        box-sizing: border-box;
        border-radius: 5px;
        padding: 10px;
        border: 0.02667rem solid #373a40;
      }
    }

    .btn {
      padding: 0px 8px;
      appearance: none;
      text-align: left;
      text-decoration: none;
      box-sizing: border-box;
      height: 26px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
      -webkit-tap-highlight-color: transparent;
      display: inline-block;
      width: auto;
      border-radius: 32px;
      font-weight: 600;
      position: relative;
      line-height: 1;
      font-size: 14px;
      user-select: none;
      cursor: pointer;
      border: 1px solid transparent;
      background-color: rgba(25, 113, 194, 0.2);
      color: rgb(165, 216, 255);
      display: flex;
      align-items: center;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;

      span {
        margin-left: 5px;
      }
    }

    .icons {
      padding: 0px 8px;
      appearance: none;
      text-align: left;
      text-decoration: none;
      box-sizing: border-box;
      height: 26px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
      -webkit-tap-highlight-color: transparent;
      display: inline-block;
      width: auto;
      border-radius: 32px;
      font-weight: 600;
      position: relative;
      line-height: 1;
      font-size: 14px;
      user-select: none;
      cursor: pointer;
      color: #fff;
      display: flex;
      align-items: center;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;

      span {
        margin-left: 5px;
      }
    }

    .xuanzhuanIcon {
      transform: rotate(180deg)
    }

    .moreAdd {
      width: 100%;
      height: auto;
      border-radius: 4px;
      font-weight: 600;
      position: relative;
      line-height: 1;
      font-size: 14px;
      user-select: none;
      cursor: pointer;
      border: 1px solid transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-top: 8px;
      border-top: 1px solid #373a40;
    }
  }
}

@media screen and (max-width:768px) {
  .creatVideo {
    width: 93%;
    margin: 20px auto;
  }
}</style>
